<template>
  <nav class="navigator" :style="{ backgroundColor: navBgColor, color: 'white' }">
    <img src="@/assets/homepage/cultureCenter.png" alt="网站图标" height="30px" width="30px">
    <router-link to="/" style="font-size:30px">传统文化体验馆</router-link>
    <ul style="font-size:16px">
      <li><router-link to="/首页">首页</router-link></li>
      <li><router-link to="/每日一闻">资讯</router-link></li>
      <li><router-link to="/直播">直播</router-link></li>
      <li><router-link to="/教学">教学</router-link></li>
      <li><router-link to="/体验页">体验</router-link></li>
      <!-- 其他导航项 -->
    </ul>
    <div class="search">
        <input type="text" placeholder="搜索项目...">
        <button><img src="@/assets/homepage/search.png" alt="搜索"></button>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'MainNav',
  computed: {
    navBgColor() {
      return this.$route.name === 'IntroductionPage' ? 'black' : 'rgb(111, 2, 2)' 
    }
  }
}

</script>

<style scoped>
/* 导航栏专用样式 */
.navigator {
  /* 保持原有样式 */
    display: flex;
    flex-direction: row;
    height: 50px; 
    width: 100vw;
    align-items: center;
    color: #eee;
    z-index: 2;
}
.navigator ul{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    justify-content: space-around;
    gap: 20px;
    align-items: center;
    padding-inline-start: 0;
    margin-left: 20px;
    margin-right: 20px;
}
.navigator a{
   font-family: '楷体';
   color: #eee;
   text-decoration: none;
}
.navigator .search{
    display: flex;
    flex-direction: row; 
}
.navigator .search input{
    background-color: #eeeeee00;
    height: 40px;
    width: 500px;
    border: 1px solid #eee;
    overflow: hidden;
}
.navigator .search button{
    display: flex;
    background-color: rgb(0, 0, 0);
    height: 47px;
    width: 100px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
}
.search button img{
    width: 24px;
    height: 24px;
    margin: auto;
}
</style>
